<template>
  <el-dialog v-if="visible" ref="bizFilePreview" :visible.sync="visible" :width="width" append-to-body class="biz-file-preview">
    <div slot="title" class="biz-file-preview__header">
        <div class="biz-file-preview__header-left">
            <h3 class="title" :title="file.fileName"> {{ file.fileName || $t('common.form.preview.file.filePreview') }} </h3>
            <div class="detail">
                {{ file.fileSize }}
            </div>
        </div>
        <div class="biz-file-preview__header-right">
            <!-- TODO: fullScreen -->
            <!-- <i class="iconfont icon-quanping1 cur-point" @click="fullScreen"></i> -->
            <i v-if="file.downloadUrl" class="iconfont icon-cloud-download ml_12 cur-point" :title="$t('common.base.download')" @click="download"></i>
            <i class="iconfont icon-gb1 ml_12 cur-point" :title="$t('common.base.cancel')" @click="close"></i>
        </div>
    </div>
    <div class="biz-file-preview__content" ref="test">
        <template v-if="file.fileType">
            <div v-if="file.fileType === 'image'" class="image-box">
                <el-image :src="file.url" :alt="file.fileName"></el-image>
            </div>
            <div v-if="file.fileType === 'pdf'" class="pdf-box">
                <iframe :src="file.url"></iframe>
            </div>
            <div v-if="file.fileType === 'video'" class="video-box">
                <video :src="file.url" controls="controls">
                    {{$t('common.base.tip.windowErrorTips1', {data1:'video'})}}
                </video>
            </div>
            <div v-if="file.fileType === 'audio'" class="audio-box">
                <audio :src="file.url" controls="controls">
                    {{$t('common.base.tip.windowErrorTips1', {data1:'audio'})}}
                </audio>
            </div>
        </template>
        <div v-else class="other-box">
            {{$t('common.form.preview.file.filePreviewError')}}
        </div>
    </div>

    <a ref="downloadLink" v-if="file.downloadUrl" :href="file.downloadUrl"></a>
  </el-dialog>
</template>

<script>

export default {
  name: "biz-file-preview",
  props: {
    file: {
        type: Object,
        default: () => {} // fileName, fileSize, url, id, downloadUrl, fileType
    },
    width: {
        type: String,
        default: '50%'
    }
  },
  data() {
    return {
        visible: false,
    }
  },
  methods: {
    open() {
        this.visible = true
    },

    close() {
        this.visible = false
    },

    download() {
        this.$nextTick(() => {
            this.$refs.downloadLink.click()
        })
    },
    fullScreen(){
        // dialog的全屏有点问题 暂时不做
    },
  }
}
</script>

<style lang="scss" scoped>
.biz-file-preview {
    ::v-deep .el-dialog {
        border-radius: 4px;
        .el-dialog__headerbtn {
            display: none;
        }
        .el-dialog__header {
            border-radius: 4px 4px 0 0;
            background: #FAFAFA;
            padding: 10px 20px;
        }
        .el-dialog__body {
            max-height: 70vh;
            overflow: auto;
            // background: #BFBFBF;
        }
    }

    &__header {
        background: #FAFAFA;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left {
            width: 50%;
            .title {
                margin-bottom: 0;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 100%;
            }
            .detail {
                color: #595959;
            }
        }
        &-right {
            i {
                font-size: 20px;
            }
        }
    }

    &__content {
        >div {
            padding: 16px;
            text-align: center;
        }
        audio {
            width: 60%;
        }
        video {
            max-width: 100%;
        }
        .pdf-box {
            padding: 0;
            iframe {
                width: 100%;
                height: calc(70vh - 10px);
            }
        }
        .other-box {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 300px;
            font-size: 24px;
        }
    }
}
</style>